<template>
  <div id="wrap">
  <v-scale-screen :delay="100" :fullScreen="true" width="1920" height="1080">
    <BorderBox11 title="进思大数据平台">
      <div class="angry-grid" id="screenwrap">
        <div id="item-0">
          <lineChart :seriseData="lineData"></lineChart>
        </div>
        <div id="item-1">
           <mapChart></mapChart>
        </div>
        <div id="item-2">&nbsp;</div>
        <div id="item-3">&nbsp;</div>
        <div id="item-4">&nbsp;</div>
        <div id="item-5">&nbsp;</div>
        <div id="item-6">&nbsp;</div>
        <div id="item-7">&nbsp;</div>
        <div id="item-8">&nbsp;</div>
    </div>

    </BorderBox11>
  </v-scale-screen>
  </div>
</template>
<script setup>
import {BorderBox11} from '@kjgl77/datav-vue3'
import lineChart from '@/components/charts/lineChart.vue'
import mapChart from '@/components/map/index.vue'
// 大屏适配插件
import VScaleScreen  from 'v-scale-screen' 
import autofit from 'autofit.js';
import {elRectification} from 'autofit.js'
import {lineData} from '@/views/chartdata/chartjson.js'


import {ref,onMounted} from 'vue'
  // dataV 插件
  // v-sacal-screen插件或autofit.js插件
  // echarts
  // 高德地图
  // 网格布局
onMounted(()=>{
  // 第二种适配方案
    // autofit.init({
    //     dh: 1080,
    //     dw: 1920,
    //     el: "#wrap",
    //     resize: true,
    //     ignore:["#container"]
    // }); 
      // elRectification('#container')
})

  let capsultData=ref([
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 67
    },
    {
      name: '漯河',
      value: 123
    },
    {
      name: '郑州',
      value: 55
    },
    {
      name: '西峡',
      value: 98
    }
  ])
  
</script>
<style lang="scss" scoped>
   #wrap{
    width: 100vw;
    height: 100vh;
    background-color:rgb(2,16,26);
   
   }
   .angry-grid {
   display: grid; 
   padding: 55px 20px 20px 20px;
   box-sizing: border-box;
   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   
   gap: 0px;
   height: 100%;
   
}
  
#item-0 {

  //  background-color: #DB5A97; 
   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 2;
   
}
#item-1 {

   background-color: #678B9A; 
   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 5;
   grid-column-end: 4;
   
}
#item-2 {

   background-color: #BAB8FA; 
   grid-row-start: 1;
   grid-column-start: 4;

   grid-row-end: 2;
   grid-column-end: 5;
   
}
#item-3 {

   background-color: #D5BB77; 
   grid-row-start: 2;
   grid-column-start: 1;

   grid-row-end: 3;
   grid-column-end: 2;
   
}
#item-4 {

   background-color: #DA95AF; 
   grid-row-start: 2;
   grid-column-start: 4;

   grid-row-end: 3;
   grid-column-end: 5;
   
}
#item-5 {

   background-color: #F8D567; 
   grid-row-start: 3;
   grid-column-start: 1;

   grid-row-end: 4;
   grid-column-end: 2;
   
}
#item-6 {

   background-color: #ECB89B; 
   grid-row-start: 3;
   grid-column-start: 4;

   grid-row-end: 4;
   grid-column-end: 5;
   
}
#item-7 {

   background-color: #FDED75; 
   grid-row-start: 4;
   grid-column-start: 1;

   grid-row-end: 5;
   grid-column-end: 2;
   
}
#item-8 {

   background-color: #FE5578; 
   grid-row-start: 4;
   grid-column-start: 4;

   grid-row-end: 5;
   grid-column-end: 5;
   
}
</style>